<script setup>
import { ref, reactive, watch } from "vue";
import { onShow, onReachBottom } from "@dcloudio/uni-app";
import { request } from "../../../common/http";
import { ApiUrl } from "../../../common/ApiUrl";
import { Toast, jumpPage } from "@/utils";
import NavBar from "../../components/NavBar.vue";

const state = reactive({
	navHeight: 0,
	params: {
		pageNum: 1, // 当前页码
		pageSize: 10, // 每页显示的条数
		pageCount: 1, // 总共有多少页
		keyword: "", // 搜索框产品名称
	},
})
/* 商品列表 */
let goodsList = ref([]);

onShow(() => {
	/* 获取商品列表 */
	getProductManageList();
})

/* 上拉加载 */
onReachBottom(() => {
	state.params.pageNum++;
	if (state.params.pageNum < state.params.pageCount + 1 && (state.params.pageCount != 1)) {
		getProductManageList();
	} else {
		// 没有数据了
	}
})

/* 场地名称搜索框确认按钮点击事件 */
const handleSearch = () => {
	/* 清空商品列表 */
	goodsList.value = [];
	/* 获取商品列表数据 */
	getProductManageList();
}

/* 添加商品 */
const handleAddGood = () => {
	jumpPage("/pages/index/ProductManager/Add");
}

/* 删除商品 */
const handleDeleteGood = (item) => {
	uni.showModal({
		title: "删除商品",
		content: "是否删除该商品",
		confirmColor: "#FF4638;",
		success: (res) => {
			if (res.confirm) {
				request({
					url: `${ApiUrl.GoodsUrl}/${item.id}`,
					method: "delete"
				}).then(res => {
					if (res.status == 0) {
						Toast("删除成功!");
						goodsList.value = [];
						getProductManageList();
					} else {
						Toast(data.msg, "error");
					}
				})
			}
		}
	})
}

/* 获取商品列表 */
const getProductManageList = () => {
	request({
		url: `${ApiUrl.GoodsUrl}/list`,
		method: "post",
		data: {
			...state.params
		}
	}).then(res => {
		goodsList.value = goodsList.value.concat(res.data.list);
		state.params.pageCount = res.data.pages;
	})
}

watch(() => state.params.keyword, (val) => {
	if (!val) {
		state.params.pageNum = 1;
		goodsList.value = [];
		getProductManageList();
	}
})
</script>

<template>
	<view class="product_manage">
		<NavBar v-model:navHeight="state.navHeight">
			<template v-slot:center>
				<view class="search">
				  <view class="input">
				    <image mode="widthFix" class="icon" src="/static/image/navbar/search.png" />
				    <input v-model="state.params.keyword" placeholder="请输入产品名称" @confirm="handleSearch" />
				  </view>
					<view class="filter">
						<image mode="aspectFill" src="/static/image/home/icon/filter_product.png"/>
						<text>筛选</text>
					</view>
				</view>
			</template>
		</NavBar>
		<view class="product_list">
		  <view class="product_item" v-for="item in goodsList" :key="item.id">
		    <view class="header">
		      商品ID：{{ item.id }}<text>编辑</text>
		    </view>
		    <view class="body">
		      <image class="product_cover" :src="`${ApiUrl.ImageUrl}/${item.image}`" mode="aspectFill"></image>
		      <view class="info">
		        <view class="name">{{ item.name }}</view>
		        <view class="category">规格: {{ item.goodsCategory.name }}</view>
		      </view>
		      <image class="remove" mode="widthFix" src="/static/image/home/icon/remove.png" @click="handleDeleteGood(item)"/>
		    </view>
		  </view>
		</view>
		<view class="common_footer_btn">
		  <view @click="handleAddGood">添加商品</view>
		</view>
	</view>
  
</template>

<style lang='scss'>
.product_manage {
	position: relative;
	box-sizing: border-box;
	padding-top: calc(v-bind('state.navHeight') * 1px);
	.m-nav {
		.nav {
			.center {
				left: unset !important;
				transform: translate(10%, -50%) !important;
				.search {
					.filter {
						display: flex;
						align-items: center;
						image {
							width: 32rpx;
							height: 32rpx;
							margin: 0 6rpx 0 24rpx;
						}
						text {
							font-size: 24rpx;
							color: #FF9832;
							line-height: 32rpx;
						}
					}
				}
			}
		}
	}
	.product_list {
		position: absolute;
		top: calc(v-bind('state.navHeight') * 1px);
		width: 686rpx;
		margin: 24rpx 32rpx 0;
	  box-sizing: border-box;
		padding-bottom: 170rpx !important;
	  .product_item {
	    margin: 0 0 24rpx;
			border-radius: 8rpx;
	    background: #ffffff;
			box-sizing: border-box;
			padding: 0 40rpx 28rpx 32rpx;
	    .header {
				width: 100%;
	      font-size: 24rpx;
	      color: #999999;
	      height: 62rpx;
	      box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
				display: flex;
				align-items: center;
	      text {
	        color: #FF9832;
	        margin-left: 40rpx;
	      }
	    }
	    .body {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
				box-sizing: border-box;
				padding-top: 24rpx;
	      .product_cover {
					width: 164rpx;
					height: 184rpx;
					border-radius: 16rpx;
					margin-right: 16rpx;
				}
	      .info {
	        font-weight: bold;
	        font-size: 24rpx;
	        color: #999999;
	        flex: 1;
	        .name {
						margin-bottom: 12rpx;
					}
	      }
	      .remove {
	        width: 72rpx;
	      }
	    }
	  }
	}
}
</style>